<template>
  <div class="comments-page">
    <!-- 页面头部：标题、统计数据和操作区 -->
    <page-header
      title="评论管理"
      :stats="[
        {
          label: '待审核',
          value: pendingCount,
          type: 'warning',
          highlight: true,
        },
        {
          label: '已通过',
          value: approvedCount,
          type: 'success',
        },
        {
          label: '已拒绝',
          value: rejectedCount,
          type: 'danger',
        },
      ]"
    >
      <!-- 右侧操作区：搜索框和筛选按钮 -->
      <template #right>
        <el-input
          v-model="filterForm.keyword"
          class="search-input"
          placeholder="搜索评论内容或文章标题"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>

        <el-button
          class="filter-btn"
          :class="{ 'is-active': showFilterDialog }"
          @click="showFilterDialog = true"
        >
          <el-icon><Filter /></el-icon>
          <span>筛选</span>
        </el-button>
      </template>
    </page-header>

    <!-- 主内容区：评论列表展示 -->
    <div class="main-content">
      <div class="comments-list">
        <!-- 空状态展示 -->
        <el-empty
          v-if="!filteredComments.length"
          :description="filterForm.keyword ? '未找到相关评论' : '暂无评论'"
        />

        <!-- 评论卡片网格布局 -->
        <div v-else class="comment-items">
          <div v-for="comment in filteredComments" :key="comment.id" class="comment-item">
            <!-- 评论卡片头部：用户信息和状态标签 -->
            <div class="comment-header">
              <div class="user-info">
                <el-avatar :src="comment.avatar" :size="32">
                  {{ comment.nickname.charAt(0) }}
                </el-avatar>
                <div class="user-meta">
                  <span class="nickname">{{ comment.nickname }}</span>
                  <span class="time">{{ formatTime(comment.createTime) }}</span>
                </div>
              </div>
              <div class="status-tag" :class="getStatusType(comment.status)">
                {{ getStatusText(comment.status) }}
              </div>
            </div>

            <!-- 评论卡片内容区 -->
            <div class="comment-body">
              <!-- 文章来源信息 -->
              <div class="article-source" @click="handleViewArticle(comment.articleId)">
                <el-icon><Document /></el-icon>
                <span class="article-title">{{ comment.articleTitle }}</span>
                <el-icon class="arrow"><ArrowRight /></el-icon>
              </div>

              <!-- 回复引用区（如果存在） -->
              <div v-if="comment.replyTo" class="reply-quote">
                <div class="quote-content">
                  <span class="quote-user">@{{ comment.replyTo.nickname }}：</span>
                  {{ comment.replyTo.content }}
                </div>
              </div>

              <!-- 评论正文 -->
              <p class="comment-text">{{ comment.content }}</p>
            </div>

            <!-- 评论操作按钮组 -->
            <div class="comment-actions">
              <!-- 待审核状态特有操作 -->
              <template v-if="comment.status === 'pending'">
                <el-tooltip content="通过评论" placement="top">
                  <el-button text type="success" size="small" @click="handleApprove(comment)">
                    <el-icon><Check /></el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip content="拒绝评论" placement="top">
                  <el-button text type="danger" size="small" @click="handleReject(comment)">
                    <el-icon><Close /></el-icon>
                  </el-button>
                </el-tooltip>
              </template>
              <!-- 所有状态共有操作 -->
              <el-tooltip content="回复评论" placement="top">
                <el-button text type="primary" size="small" @click="handleReply(comment)">
                  <el-icon><ChatDotRound /></el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="删除评论" placement="top">
                <el-button text type="danger" size="small" @click="handleDelete(comment)">
                  <el-icon><Delete /></el-icon>
                </el-button>
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚分页器 -->
    <div class="page-footer">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[4, 8, 12]"
        layout="total, sizes, prev, pager, next"
        background
      />
    </div>

    <!-- 筛选条件弹窗 -->
    <el-dialog v-model="showFilterDialog" title="筛选条件" width="360px" destroy-on-close>
      <el-form :model="filterForm" label-position="top">
        <!-- 评论时间范围筛选 -->
        <el-form-item label="评论时间">
          <el-date-picker
            v-model="filterForm.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcuts"
            style="width: 100%"
          />
        </el-form-item>

        <!-- 评论类型筛选 -->
        <el-form-item label="评论类型">
          <el-select v-model="filterForm.type" style="width: 100%">
            <el-option label="全部评论" value="all" />
            <el-option label="主评论" value="main" />
            <el-option label="回复评论" value="reply" />
          </el-select>
        </el-form-item>

        <!-- 排序方式选择 -->
        <el-form-item label="排序方式">
          <el-select v-model="filterForm.orderBy" style="width: 100%">
            <el-option label="最新评论" value="createTime desc" />
            <el-option label="最早评论" value="createTime asc" />
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleResetFilter">重置</el-button>
          <el-button type="primary" @click="handleApplyFilter">应用</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 回复评论抽屉 -->
    <el-drawer v-model="showReplyDrawer" title="回复评论" size="360px" destroy-on-close>
      <el-form :model="replyForm" :rules="replyRules" label-position="top">
        <el-form-item prop="content">
          <el-input
            v-model="replyForm.content"
            type="textarea"
            :rows="4"
            placeholder="请输入回复内容..."
            maxlength="500"
            show-word-limit
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="drawer-footer">
          <el-button @click="showReplyDrawer = false">取消</el-button>
          <el-button type="primary" :loading="submitting" @click="handleSubmitReply">
            发表回复
          </el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Document,
  ChatDotRound,
  Check,
  Close,
  Delete,
  Search,
  Filter,
  ArrowRight,
} from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'

// 注册 dayjs 相对时间插件，用于评论时间的友好展示
dayjs.extend(relativeTime)

/**
 * 类型定义区域
 */

/**
 * 评论状态类型定义
 * @typedef {Object} CommentStatus
 * @property {'pending' | 'approved' | 'rejected'} value - 状态值
 * @property {string} label - 状态显示文本
 * @property {'warning' | 'success' | 'danger'} type - 状态对应的样式类型
 */
interface CommentStatus {
  value: 'pending' | 'approved' | 'rejected'
  label: string
  type: 'warning' | 'success' | 'danger'
}

/**
 * 评论对象类型定义
 * @typedef {Object} Comment
 * @property {number} id - 评论ID
 * @property {string} content - 评论内容
 * @property {string} nickname - 评论者昵称
 * @property {string} avatar - 评论者头像URL
 * @property {string} createTime - 创建时间
 * @property {CommentStatus['value']} status - 评论状态
 * @property {number} articleId - 关联文章ID
 * @property {string} articleTitle - 关联文章标题
 * @property {Object} [replyTo] - 回复的评论信息（可选）
 */
interface Comment {
  id: number
  content: string
  nickname: string
  avatar: string
  createTime: string
  status: CommentStatus['value']
  articleId: number
  articleTitle: string
  replyTo?: {
    id: number
    nickname: string
    content: string
  }
}

/**
 * 状态管理区域
 */

// 页面UI状态控制
const showFilterDialog = ref(false) // 筛选弹窗显示状态
const showReplyDrawer = ref(false) // 回复抽屉显示状态
const submitting = ref(false) // 提交操作加载状态

// 分页相关状态
const currentPage = ref(1) // 当前页码
const pageSize = ref(4) // 每页显示数量
const total = ref(100) // 总记录数

/**
 * 表单数据区域
 */

// 筛选条件表单数据
const filterForm = ref({
  status: 'all', // 评论状态筛选
  timeRange: [], // 时间范围筛选
  keyword: '', // 关键词搜索
  type: 'all', // 评论类型筛选
  orderBy: 'createTime desc', // 排序方式
})

// 回复表单数据
const replyForm = ref({
  content: '', // 回复内容
})

// 回复表单验证规则
const replyRules = {
  content: [
    { required: true, message: '请输入回复内容', trigger: 'blur' },
    { min: 2, max: 500, message: '回复内容长度应在 2 到 500 个字符之间', trigger: 'blur' },
  ],
}

/**
 * 日期快捷选项配置
 * 用于时间范围选择器的快捷选项
 */
const dateShortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
]

/**
 * 模拟数据区域
 * 实际应用中应替换为API调用
 */
const comments = ref<Comment[]>([
  {
    id: 1,
    content: '这篇文章写得很好，收获很多！代码示例特别实用，希望能有更多这样的文章分享。',
    nickname: '张三',
    avatar: '',
    createTime: '2024-03-27 10:30:00',
    status: 'pending',
    articleId: 1,
    articleTitle: '如何提高代码质量：十个实用技巧',
  },
  {
    id: 2,
    content: '同意楼上的观点，特别是关于代码review的部分讲得非常到位。我们团队也在实践这些方法。',
    nickname: '李四',
    avatar: '',
    createTime: '2024-03-27 11:00:00',
    status: 'approved',
    articleId: 1,
    articleTitle: '如何提高代码质量：十个实用技巧',
    replyTo: {
      id: 1,
      nickname: '张三',
      content: '这篇文章写得很好，收获很多！',
    },
  },
  {
    id: 3,
    content: '文章的配图很精美，整体排版也很舒服。建议可以多写一些关于设计模式的内容。',
    nickname: '王五',
    avatar: '',
    createTime: '2024-03-27 14:20:00',
    status: 'approved',
    articleId: 2,
    articleTitle: '前端架构设计：从入门到实践',
  },
  {
    id: 4,
    content: '这个项目的思路很新颖，但是在并发处理这块还可以再优化一下。',
    nickname: '赵六',
    avatar: '',
    createTime: '2024-03-27 16:45:00',
    status: 'pending',
    articleId: 3,
    articleTitle: 'Node.js高并发实战案例',
  },
  {
    id: 5,
    content: '期待更新！这个系列的文章对新手非常友好，每个步骤都讲解得很清晰。',
    nickname: '小明',
    avatar: '',
    createTime: '2024-03-27 18:30:00',
    status: 'approved',
    articleId: 4,
    articleTitle: 'Vue3 + TypeScript 完全指南',
  },
])

/**
 * 计算属性区域
 */

/**
 * 过滤后的评论列表
 * 根据筛选条件过滤评论数据
 * @returns {Comment[]} 过滤后的评论数组
 */
const filteredComments = computed(() => {
  // TODO: 实现实际筛选逻辑
  return comments.value
})

// 各状态评论数量统计
const totalComments = computed(() => comments.value.length)
const pendingCount = computed(() => comments.value.filter((c) => c.status === 'pending').length)
const approvedCount = computed(() => comments.value.filter((c) => c.status === 'approved').length)
const rejectedCount = computed(() => comments.value.filter((c) => c.status === 'rejected').length)

/**
 * 是否有活跃的筛选条件
 * 用于UI展示和条件判断
 */
const hasActiveFilters = computed(() => {
  return (
    filterForm.value.status !== 'all' ||
    filterForm.value.keyword ||
    filterForm.value.type !== 'all' ||
    filterForm.value.timeRange?.length
  )
})

/**
 * 工具方法区域
 */

/**
 * 获取评论状态对应的样式类型
 * @param {CommentStatus['value']} status - 评论状态值
 * @returns {CommentStatus['type']} 对应的样式类型
 */
const getStatusType = (status: CommentStatus['value']): CommentStatus['type'] => {
  const statusMap: Record<CommentStatus['value'], CommentStatus['type']> = {
    pending: 'warning',
    approved: 'success',
    rejected: 'danger',
  }
  return statusMap[status]
}

/**
 * 获取评论状态对应的显示文本
 * @param {CommentStatus['value']} status - 评论状态值
 * @returns {string} 状态显示文本
 */
const getStatusText = (status: CommentStatus['value']): string => {
  const statusMap: Record<CommentStatus['value'], string> = {
    pending: '待审核',
    approved: '已通过',
    rejected: '已拒绝',
  }
  return statusMap[status]
}

/**
 * 格式化时间为友好显示格式
 * 将时间转换为"x分钟前"、"x小时前"、"x天前"或日期格式
 * @param {string} time - ISO格式的时间字符串
 * @returns {string} 格式化后的友好时间字符串
 */
const formatTime = (time: string): string => {
  const date = new Date(time)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (days === 0) {
    const hours = Math.floor(diff / (1000 * 60 * 60))
    if (hours === 0) {
      const minutes = Math.floor(diff / (1000 * 60))
      return `${minutes} 分钟前`
    }
    return `${hours} 小时前`
  } else if (days < 30) {
    return `${days} 天前`
  } else {
    return time.split(' ')[0]
  }
}

/**
 * 事件处理区域
 */

/**
 * 查看文章详情
 * @param {number} articleId - 文章ID
 */
const handleViewArticle = (articleId: number) => {
  // TODO: 实现跳转到文章详情页的逻辑
  console.log('查看文章:', articleId)
}

/**
 * 通过评论
 * @param {Comment} comment - 评论对象
 */
const handleApprove = async (comment: Comment) => {
  try {
    await ElMessageBox.confirm('确定通过这条评论吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info',
    })
    // TODO: 实现通过评论的API调用
    comment.status = 'approved'
    ElMessage.success('评论已通过')
  } catch {
    // 用户取消操作，无需处理
  }
}

/**
 * 拒绝评论
 * @param {Comment} comment - 评论对象
 */
const handleReject = async (comment: Comment) => {
  try {
    await ElMessageBox.confirm('确定拒绝这条评论吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    // TODO: 实现拒绝评论的API调用
    comment.status = 'rejected'
    ElMessage.success('评论已拒绝')
  } catch {
    // 用户取消操作，无需处理
  }
}

/**
 * 删除评论
 * @param {Comment} comment - 评论对象
 */
const handleDelete = async (comment: Comment) => {
  try {
    await ElMessageBox.confirm('确定删除这条评论吗？此操作不可恢复。', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    // TODO: 实现删除评论的API调用
    comments.value = comments.value.filter((c) => c.id !== comment.id)
    ElMessage.success('评论已删除')
  } catch {
    // 用户取消操作，无需处理
  }
}

/**
 * 回复评论
 * @param {Comment} comment - 被回复的评论对象
 */
const handleReply = (comment: Comment) => {
  showReplyDrawer.value = true
  // TODO: 设置回复相关数据，如被回复评论的ID等
}

/**
 * 提交回复
 */
const handleSubmitReply = async () => {
  // TODO: 实现回复提交逻辑和API调用
  submitting.value = true
  try {
    // 模拟API调用延迟
    await new Promise((resolve) => setTimeout(resolve, 500))
    showReplyDrawer.value = false
    ElMessage.success('回复已发送')
    replyForm.value.content = ''
  } catch (error) {
    ElMessage.error('回复发送失败')
  } finally {
    submitting.value = false
  }
}

/**
 * 重置筛选条件
 */
const handleResetFilter = () => {
  filterForm.value = {
    status: 'all',
    timeRange: [],
    keyword: '',
    type: 'all',
    orderBy: 'createTime desc',
  }
}

/**
 * 应用筛选条件
 */
const handleApplyFilter = () => {
  showFilterDialog.value = false
  // TODO: 应用筛选条件并刷新列表
  // fetchCommentsList()
}

/**
 * 分页处理
 */

/**
 * 处理页码大小变化事件
 * @param {number} val - 新的页码大小
 */
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
  // TODO: 重新获取数据
  // fetchCommentsList()
}

/**
 * 处理页码变化事件
 * @param {number} val - 新的页码
 */
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  // TODO: 重新获取数据
  // fetchCommentsList()
}

/**
 * 初始化函数
 * 组件挂载时自动执行
 */
// TODO: 实现初始化数据的API调用
// onMounted(() => {
//   fetchCommentsList()
// })
</script>

<style lang="scss" scoped>
/**
 * 评论管理页面样式
 */
.comments-page {
  height: 100%;
  background: var(--el-bg-color-page);
  display: flex;
  flex-direction: column;

  /**
   * 自定义滚动条样式
   */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.3);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(144, 147, 153, 0.5);
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  /**
   * 页面头部样式
   * 使用 :deep 穿透到子组件
   */
  :deep(.page-header) {
    padding: 24px;
    flex-shrink: 0;

    .header-left {
      display: flex;
      align-items: baseline;
      gap: 12px;

      .title {
        font-size: 28px;
        font-weight: 600;
        color: var(--el-text-color-primary);
        line-height: 1.4;
        margin: 0;
      }

      .subtitle {
        font-size: 14px;
        color: var(--el-text-color-secondary);
      }
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 12px;

      .status-select {
        width: 120px;
      }

      .search-input {
        width: 240px;

        .el-input__wrapper {
          box-shadow: 0 0 0 1px var(--el-border-color) inset;

          &:hover {
            box-shadow: 0 0 0 1px var(--el-border-color-darker) inset;
          }

          &.is-focus {
            box-shadow: 0 0 0 1px var(--el-color-primary) inset;
          }
        }
      }

      .filter-btn {
        &.is-active {
          color: var(--el-color-primary);
          background: var(--el-color-primary-light-9);
        }

        .el-icon {
          margin-right: 4px;
        }
      }
    }
  }

  /**
   * 主内容区样式
   */
  .main-content {
    flex: 1;
    min-height: 0;
    padding: 0 0 24px;
    overflow: auto; /* 允许内容区滚动 */

    /**
     * 评论列表容器
     */
    .comments-list {
      max-width: calc(100% - 48px);
      width: 100%;
      margin: 0 auto;

      /**
       * 评论卡片网格布局
       */
      .comment-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 每行两个卡片 */
        gap: 20px; /* 卡片间距 */
        padding-bottom: 24px;
      }

      /**
       * 单个评论卡片样式
       */
      .comment-item {
        background: #fff;
        border-radius: 12px;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
        min-height: 240px;
        position: relative;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        overflow: hidden;

        /* 卡片悬停效果 */
        &:hover {
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
          transform: translateY(-2px);

          /* 显示操作按钮 */
          .comment-actions {
            opacity: 1;
            transform: translateY(0);
          }
        }

        /**
         * 评论卡片头部
         */
        .comment-header {
          padding: 16px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-shrink: 0;
          border-bottom: 1px solid var(--el-border-color-lighter);

          /* 用户信息区 */
          .user-info {
            display: flex;
            align-items: center;
            gap: 10px;

            /* 头像样式 */
            .el-avatar {
              border: none;
              background: var(--el-color-primary-light-9);
              color: var(--el-color-primary);
              font-weight: 600;
              box-shadow: 0 2px 6px rgba(var(--el-color-primary-rgb), 0.2);
            }

            /* 用户元信息 */
            .user-meta {
              display: flex;
              flex-direction: column;
              gap: 2px;

              .nickname {
                font-size: 14px;
                font-weight: 600;
                color: var(--el-text-color-primary);
              }

              .time {
                font-size: 12px;
                color: var(--el-text-color-secondary);
              }
            }
          }

          /* 状态标签 */
          .status-tag {
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;

            /* 待审核状态 */
            &.warning {
              color: var(--el-color-warning-dark-2);
              background: var(--el-color-warning-light-9);
            }

            /* 已通过状态 */
            &.success {
              color: var(--el-color-success-dark-2);
              background: var(--el-color-success-light-9);
            }

            /* 已拒绝状态 */
            &.danger {
              color: var(--el-color-danger-dark-2);
              background: var(--el-color-danger-light-9);
            }
          }
        }

        /**
         * 评论内容区
         */
        .comment-body {
          padding: 16px;
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 12px;

          /* 文章来源 */
          .article-source {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            flex-shrink: 0;
            border-radius: 6px;
            background: var(--el-fill-color-light);
            max-width: 100%;

            .el-icon {
              flex-shrink: 0;
              font-size: 14px;
              color: var(--el-color-info);
            }

            .article-title {
              font-size: 13px;
              color: var(--el-text-color-regular);
              @include text-ellipsis; /* 文本溢出显示省略号 */
              flex: 1;
              min-width: 0;
            }

            .arrow {
              font-size: 12px;
              color: var(--el-color-primary);
              opacity: 0;
              transform: translateX(-4px);
              transition: all 0.2s ease;
            }

            /* 悬停效果 */
            &:hover {
              background: var(--el-color-primary-light-9);

              .article-title {
                color: var(--el-color-primary);
              }

              .arrow {
                opacity: 1;
                transform: translateX(0);
              }
            }
          }

          /* 回复引用区 */
          .reply-quote {
            background: var(--el-fill-color-light);
            border-radius: 8px;
            flex-shrink: 0;
            position: relative;

            /* 引号装饰 */
            &::before {
              content: '"';
              position: absolute;
              left: 8px;
              top: -6px;
              font-size: 28px;
              color: var(--el-color-primary-light-5);
              font-family: serif;
              opacity: 0.5;
            }

            .quote-content {
              font-size: 13px;
              color: var(--el-text-color-regular);
              line-height: 1.5;
              padding: 12px 16px;
              display: -webkit-box;
              -webkit-line-clamp: 2; /* 最多显示2行 */
              -webkit-box-orient: vertical;
              white-space: normal;
              overflow: hidden;
              font-style: italic;

              .quote-user {
                color: var(--el-color-primary);
                font-weight: 500;
                font-style: normal;
              }
            }
          }

          /* 评论正文 */
          .comment-text {
            font-size: 14px;
            line-height: 1.6;
            color: var(--el-text-color-primary);
            margin: 0;
            flex: 1;
            display: -webkit-box;
            -webkit-line-clamp: 4; /* 最多显示4行 */
            -webkit-box-orient: vertical;
            white-space: normal;
            overflow: hidden;
            word-break: break-word;
          }
        }

        /**
         * 评论操作按钮组
         * 默认隐藏，悬停时显示
         */
        .comment-actions {
          position: absolute;
          right: 12px;
          bottom: 12px;
          display: flex;
          gap: 6px;
          opacity: 0; /* 默认隐藏 */
          transform: translateY(4px);
          transition: all 0.2s ease;
          padding: 4px 6px;
          border-radius: 8px;
          background: rgba(255, 255, 255, 0.9);
          backdrop-filter: blur(8px); /* 毛玻璃效果 */
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
          z-index: 1;

          /* 按钮样式 */
          .el-button {
            padding: 7px;
            border-radius: 6px;
            height: 32px;
            width: 32px;

            .el-icon {
              margin: 0;
              font-size: 16px;
            }

            /* 悬停提升效果 */
            &:hover {
              transform: translateY(-2px);
            }

            /* 主要按钮样式 */
            &.el-button--primary {
              color: var(--el-color-primary);
              &:hover {
                color: #fff;
                background: var(--el-color-primary);
              }
            }

            /* 成功按钮样式 */
            &.el-button--success {
              color: var(--el-color-success);
              &:hover {
                color: #fff;
                background: var(--el-color-success);
              }
            }

            /* 危险按钮样式 */
            &.el-button--danger {
              color: var(--el-color-danger);
              &:hover {
                color: #fff;
                background: var(--el-color-danger);
              }
            }
          }
        }
      }
    }
  }

  /**
   * 页脚分页器样式
   */
  .page-footer {
    padding: 16px 0;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid var(--el-border-color-lighter);
  }
}

/**
 * 弹窗样式定制
 */
:deep(.el-dialog) {
  /* 弹窗头部 */
  .el-dialog__header {
    margin-bottom: 0;
    padding: 20px;
    border-bottom: 1px solid var(--el-border-color-light);
  }

  /* 弹窗内容区 */
  .el-dialog__body {
    padding: 20px;
  }

  /* 弹窗底部 */
  .el-dialog__footer {
    padding: 20px;
    border-top: 1px solid var(--el-border-color-light);
  }
}

/**
 * 抽屉样式定制
 */
:deep(.el-drawer) {
  /* 抽屉头部 */
  .el-drawer__header {
    margin-bottom: 0;
    padding: 20px;
    border-bottom: 1px solid var(--el-border-color-light);
  }

  /* 抽屉内容区 */
  .el-drawer__body {
    padding: 20px;
  }

  /* 抽屉底部 */
  .drawer-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: #fff;
    border-top: 1px solid var(--el-border-color-light);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
}
</style>
